<div class="flex justify-between items-center">
    <h2>
        {{ 'PAC.KEY_WORDS.NOTIFICATION_DESTINATION' | translate: {Default: "Notification Destinations"} }}
    </h2>
    <button mat-raised-button color="primary"
        (click)="openCreate()">
        <mat-icon>add</mat-icon>{{ 'PAC.ACTIONS.NEW' | translate: {Default: "New"} }} {{ 'PAC.KEY_WORDS.NOTIFICATION_DESTINATION' | translate: {Default: "Notification Destinations"} }}
    </button>
</div>

<div>
    <div *ngFor="let destination of destinations$ | async" fxFlex.xs="100" fxFlex="33" [ngClass]="routeAnimationsElements">
        <mat-card class="pac-sketch-card">
            <mat-card-header (click)="edit(destination)">
                <div mat-card-avatar>
                    <img src="{{IMG_ROOT}}/{{destination.type}}.png">
                </div>
                <mat-card-title>
                    <a (click)="edit(destination)">{{destination.name}}</a>
                </mat-card-title>
                <mat-card-subtitle fxLayout="row" fxLayoutAlign="start end">
                    {{destination.type}}
                </mat-card-subtitle>
            </mat-card-header>

            <button mat-icon-button color="warn" class="pac-sketch-card__remove"
                (click)="remove(destination)">
                <mat-icon>remove</mat-icon>
            </button>
        </mat-card>
    </div>
</div>
